<template>
	<div class="system-add-dept-container">
		<el-dialog :title="ruleForm.id ? '编辑' : '添加'" v-model="isShowDialog" width="400px" draggable>
			<el-form ref="ruleFormRef" :model="ruleForm" size="default" label-width="90px" :rules="rules">
				<el-row :gutter="35">
					<el-col :xs="23" :sm="23" :md="23" :lg="23" :xl="23" class="mb20">
						<el-form-item label="部门名称" prop="deptName">
							<el-input v-model="ruleForm.deptName" placeholder="请输入部门名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="23" :sm="23" :md="23" :lg="23" :xl="23" class="mb20">
						<el-form-item label="部门描述" prop="desc">
							<el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="15" :sm="15" :md="15" :lg="15" :xl="15" class="mb20">
						<el-form-item label="排序" prop="sort">
							<el-input-number v-model="ruleForm.sort" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">确 认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { ref, reactive, toRefs, defineComponent, nextTick } from 'vue';
// import { store } from '/@/store/index.ts';
// import { ElMessage } from 'element-plus';
// 后台接口
import { systemApi } from '/@/api/system/index';

// 定义接口来定义对象的类型
interface DeptSate {
	isShowDialog: boolean;
	ruleForm: {
		id: string;
		deptName: string;
		sort: number;
		desc: string;
		createBy: string;
	};
}

export default defineComponent({
	name: 'systemAddDept',
	setup(props,{emit}) {
		const rules = reactive({
			deptName: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
		});
		const ruleFormRef = ref();
		const state = reactive<DeptSate>({
			isShowDialog: false,
			ruleForm: {
				id: '',
				deptName: '', // 部门名称
				sort: 0, // 排序
				desc: '', // 部门描述
				createBy: '' //操作用户id
			},
		});
		// 打开添加弹窗
		const openAddDialog = () => {
			nextTick(() => {
				state.ruleForm = {
					id: '',
					deptName: '', // 部门名称
					sort: 0, // 排序
					desc: '', // 部门描述
					createBy: '' //操作用户id
				};
				ruleFormRef.value?.resetFields();
				state.isShowDialog = true;
			});
		};
		// 打开编辑弹窗
		const openEditDialog = (row: any) => {
			state.ruleForm = Object.assign({}, row);
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 确定
		const onSubmit = async () => {
			// 表单验证
			await ruleFormRef.value?.validate(async (valid: any) => {
				if (valid) {
					// 保存到数据库
					// state.ruleForm.createBy = store.state.userInfos.userInfos.id; //操作用户id
					let res: any = await systemApi().addDepartment(state.ruleForm);
					if (res.success) {
						emit('initTableData')
						ElMessage.success(state.ruleForm.id ? '编辑成功' : '添加成功');
					} else {
						ElMessage.error(state.ruleForm.id ? '编辑失败' : '添加失败');
					}
					closeDialog();
				}
			});
		};
		return {
			rules,
			ruleFormRef,
			openAddDialog,
			openEditDialog,
			closeDialog,
			onCancel,
			onSubmit,
			...toRefs(state),
		};
	},
});
</script>
